<template>
	<div class="QualityControl">
		<audio controls ref="audio" class="aud" v-show="false">
		  <source src="../../../../public/mp3/NO.mp3" />
		</audio>
		<audio controls ref="audioT" class="aud" v-show="false">
		  <source src="../../../../public/mp3/OK.mp3" />
		</audio>
		<div class="cont">
			<div class="cont-left">
				<div class="BasicInformation">
					<div class="title">
						基本信息
					</div>
					<div class="info">
						<el-row :gutter="10">
							<el-col :span="12">
								<el-form-item label="工 单 I D ：" prop="fOrgCategory">
									<el-input disabled v-model="from.data.fMoId"/>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="工单编号：" prop="fOrgCategory">
									<el-input disabled v-model="from.data.fMocCode"/>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="产品品号：" prop="fOrgCategory">
									<el-input disabled v-model="from.data.fInvCode"/>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="预计产量：" prop="fOrgCategory">
									<el-input disabled v-model="from.data.fQty"/>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="产品品名：" prop="fOrgCategory">
									<el-input disabled v-model="from.data.fInvName"/>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="产品规格：" prop="fOrgCategory">
									<el-input disabled v-model="from.data.fInvStd"/>
								</el-form-item>
							</el-col>
							<el-col :span="20">
								<el-form-item label="规格描述：" prop="fOrgCategory">
									<el-input  disabled v-model="from.data.fInvRemark"/>
								</el-form-item>
							</el-col>
							<el-col :span="4">
								<el-checkbox  label="播放声音" size="large" />
							</el-col>
							<hr style="width: 100%;margin-bottom: 1rem;">
							<el-col :span="14">
								<el-form-item label="报工工序：">
									<el-input disabled v-model="from.data.wpCode"/>
								</el-form-item>
							</el-col>
							<el-col :span="10">
								<el-form-item>
									<el-input disabled v-model="from.data.wpName"/>
								</el-form-item>
							</el-col>
							<el-col :span="14">
								<el-form-item label=" 操 作 员 ：">
									<el-input disabled v-model="from.data.userCode"/>
								</el-form-item>
							</el-col>
							<el-col :span="10">
								<el-form-item>
									<el-input disabled v-model="from.data.userName"/>
								</el-form-item>
							</el-col>
							<el-col :span="20">
								<el-form-item label="产品编号：" prop="fOrgCategory">
									<el-input disabled v-model="from.data.barCode"/>
								</el-form-item>
							</el-col>
							<el-col :span='4'>
								<el-button type="danger" plain @click="clearData">初始化数据</el-button>
							</el-col>
						</el-row>
					</div>
				</div>
				<div class="Progress">
					<div class="title">
						加工进度
					</div>
					<div class="info">
						<el-row :gutter="10">
							<el-col :span="12">
								<el-form-item label="良品/不良品：" prop="fOrgName">
									  <el-switch
									    class="mb-2"
										v-model="testData.swi"
									    active-text="不良品"
									    inactive-text="良品"
									  />
								</el-form-item>
							</el-col>
							<el-col :span="12" v-show="testData.swi">
								<el-form-item label="处理方式：" prop="fOrgName">
									<el-select placeholder="请选择处理方式" style="width: 100%" filterable v-model="from.data.fHandleWay">
										<el-option v-for="item in selectList.clfs" :key="item" :label="item"
											:value="item" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="不良原因：" prop="fOrgName">
								  <el-input
									type="textarea"
									v-model.trim="from.data.remark"
								  />
								</el-form-item>
							</el-col>
							<el-col :span="18"></el-col>
							<el-col :span='3'>
								<el-button type="warning" plain @click="clear">清空</el-button>
							</el-col>
							<el-col :span="3">
								<el-button type="primary" plain @click="bg">提交</el-button>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
			<div class="cont-rit">
				<div class="ScanningInf">
					<div class="title">
						扫描信息
					</div>
					<div class="info">
						<el-row :gutter="10">
							<el-col :span="24">
								<el-form-item>
								  <el-input class="textar" :class="(SMinfShow.type!=-1)?'suc':'err'"  type="textarea" disabled :placeholder="SMinfShow.text" />
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="扫描信息：" prop="fOrgName">
								  <el-input
									autofocus
									v-model="from.sm"
									@keyup.enter="getInf"
								  />
								</el-form-item>
							</el-col>
						</el-row>
					</div>
				</div>
				<div class="Scanning">
					<div class="title">
						当前扫描
					</div>
					<div class="info">
						<el-row :gutter="10">
							<el-col :span="24">
								  <el-table :data="tableData.sm" border style="width: 100%">
									<el-table-column prop="fcbSysBarCode" label="产品编号" :show-overflow-tooltip="true" />
									<el-table-column prop="fInvCode" label="产品品号" :show-overflow-tooltip="true" />
									<el-table-column prop="fQty" label="预计产量" />
									<el-table-column prop="fInvName" label="品名" :show-overflow-tooltip="true" />
									<el-table-column prop="fInvStd" label="规格" :show-overflow-tooltip="true" />
									<el-table-column prop="remark" label="原因" :show-overflow-tooltip="true" />
									<el-table-column align="center" label="良品/不良品" #default="scope" width="120">
									  <el-result icon="success" v-if="!scope.row.scan"></el-result>
									  <el-result icon="error" v-else></el-result>
									</el-table-column>
								  </el-table>
							</el-col>
						</el-row>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footName">
<!-- 		<el-row :gutter="10">
			<el-col :span="1.5">
				录入人：
			</el-col>
			<el-col :span="2">
				<el-form-item>
					<el-input />
				</el-form-item>
			</el-col>
			<el-col :span="2">
				<el-form-item>
					<el-input />
				</el-form-item>
			</el-col>
		</el-row> -->
	</div>
</template>

<script setup>
	import { ref,getCurrentInstance,onMounted, reactive } from "vue"
	import ajax from '../../../../public/JavaScript/api/ajax.js'
	import {ElMessage,ElMessageBox} from 'element-plus'
	let testData=reactive({
		swi:false,
		isB:false
	})
	let tableData=reactive({
		sm:[]
	})
	let from =reactive({
		sm:'',
		data:{
		  "barCode": "",
		  "invCode": "",
		  "scan": "",
		  "userCode": "",
		  "userName": "",
		  "wpCode": "",
		  "wpName": "",
		  "remark":''
		}
	})
	let selectList=reactive({
		clfs:[]
	})
	let SMinfShow=reactive({
		text:'提示信息',
		type:-1
	})
	let refd=''
	function getInf(){
			ajax.post('/pqc/sinfo',{
				body:{
				  "barCode": from.data.barCode,
				  "invCode": from.data.invCode,
				  "scan": from.sm,
				  "userCode": from.data.userCode,
				  "userName": from.data.userName,
				  "wpCode": from.data.wpCode,
				  "wpName": from.data.wpName,
				  "remark":from.data.remark
				}
			},res=>{
				console.log(res)
				if(res.code==200){
					SMinfShow.text=res.data.scanMsg || '啥也没有'
					SMinfShow.type=res.data.scanCode || 0
					from.data={
						...(from.data),
						...(res.data.data?.mocoRdersDisplayVo || from.data)
					}
					from.data.barCode=res.data.data?.barCode || from.data.barCode
					if(res.data.scanCode==3){
						from.data.userName=res.data.data.name || from.data.userName
						from.data.userCode=res.data.data.code || from.data.userCode
					}else if(res.data.scanCode==2){
						from.data.wpCode=res.data.data.code || from.data.wpCode
						from.data.wpName=res.data.data.name || from.data.wpName
					}
					from.sm=''
				}else{
					ElMessage.error(res.msg)
					SMinfShow.text=res.msg
					SMinfShow.type=0
				}
			},err=>{
				console.log(err)
			})
	}
	/* 清空不良原因 */
	function clear(){
		testData.swi=false
		from.data.remark=''
	}
	/* 清空整页信息 */
	function clearAll(){
		clearObj(from.data)
		from.sm=''
		testData.swi=false
	}
	/* 对象赋空 */
	function clearObj(obj){
		for(let i in obj){
			obj[i]=''
		}
	}
	function clearData(){
		ElMessageBox.confirm(
		  '是否重置当前信息?',
		  '警告',
		  {
		    confirmButtonText: '是',
		    cancelButtonText: '否',
		    type: 'error',
		  }
		)
		  .then(() => {
			  clearAll()
		    ElMessage({
		      type: 'success',
		      message: '重置成功!',
		    })
		  })
	}
	function sendBg(){
		ajax.post('/pqc/submit',{
			body:{
				...(from.data),
				scan:(testData.swi)?'01':'00'
			}
		},res=>{
			console.log(res)
			if(res.code==200){
				SMinfShow.text=res.data.scanMsg
				SMinfShow.type=res.data.scanCode
				tableData.sm.push({
					...(res.data.data),
					scan:testData.swi,
					remark:from.data.remark
				})
				// clearAll()
				from.data.barCode=''
				from.data.remark=''
				testData.swi=false
			}else{
				ElMessage.error(res.msg)
				SMinfShow.text=res.data.scanMsg
				SMinfShow.type=res.data.scanCode
			}
		})
	}
	/* 报工 */
	function bg(){
		console.log(testData.swi)
		if(from.data.barCode && from.data.userCode && from.data.wpCode){
			sendBg()
		}else{
			ElMessage.error('参数缺失，请检查产品编号、报工工序、操作员字段是否为空')
		}
	}
	onMounted(()=>{
		refd=getCurrentInstance()
		ajax.post('/common/dict?name=处理方式',{},res=>{
			if(res.code==200){
				selectList.clfs=res.data
			}else{
				ElMessage.error('服务器异常')
			}
		})
	})
	function test(){
		refd.ctx.$refs.audioT.play();//play()
	}
</script>

<style lang="less" scoped>
	@import url("./QualityControl.less");
</style>